<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>系统管理</title>


    <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon" />
  </head>
  <body>
  <div th:replace="/layout/css :: #css"></div>
  <section class="content">
      <div class="row">
          <div id="col-md-12">
              <div class="box intro-profile">
                  <form id="searchCondition" class="form-horizontal update-check-form ">
                      <div class="box-header with-border">
                          <h3 class="box-title">查询条件</h3>

                          <div class="box-tools">
                              <a class="btn btn-primary" href="javascript:;" onclick="doSearch()"><i class="fa fa-plus-square"></i>搜索</a>
                          </div>
                      </div>
                      <div class="col-sm-12">
                          <div class="box-body col-sm-6">
                              <div class="form-group">
                                  <label class="col-sm-3 control-label condense-label">标题</label>
                                  <div class="col-sm-8">
                                      <input type="text" class="form-control" name="S_title_LIKE" id="S_title_LIKE" />
                                  </div>
                              </div>
                              <div class="form-group">
                                  <label class="col-sm-3 control-label condense-label">运营位类型</label>
                                  <div class="col-sm-8">
                                      <select id="S_type_EQUAL" name="S_type_EQ" class="form-control">
                                          <option value="-1">运营位类型</option>
                                          <option value="1">大运营位</option>
                                          <option value="2">小运营位</option>
                                      </select>
                                  </div>
                              </div>

                          </div>
                          <div class="box-body col-sm-6">
                              <div class="form-group">
                                  <label class="col-sm-3 control-label condense-label">状态</label>
                                  <div class="col-sm-8">
                                      <select id="S_status_EQUAL" name="S_status_EQ" class="form-control">
                                          <option value="-1">全部</option>
                                          <option value="1">正常</option>
                                          <option value="0">禁用</option>
                                      </select>
                                  </div>
                              </div>
                              <div class="form-group">
                                  <label class="col-sm-3 control-label condense-label">创建时间</label>
                                  <div class="col-sm-3">
                                      <input id="S_addTime_GTOE" name="S_addTime_GTOE_Date" type="text" class="form-control"/>
                                  </div>
                                  <div class="col-sm-1">
                                      -
                                  </div>
                                  <div class="col-sm-3">
                                      <input id="S_addTime_LTOE" name="S_addTime_LTOE_Date" type="text" class="form-control"/>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </form>

              </div>
              <div id="toolbar">
                  <a class="btn  btn-primary" href="javascript:;" onclick="openModal('新增运营位','/operation/toCreate')"><i class="fa fa-plus-square"></i>新增</a>
                  <a class="btn  btn-primary" href="javascript:;" onclick="toUpdate()"><i class="fa fa-pencil-square-o"></i>修改</a>
                  <a class="btn  btn-primary" href="javascript:;" onclick="deleteAction('/operation/delete/')"><i class="fa fa-times-circle"></i>删除</a>
              </div>
              <table id="table"></table>
          </div>
      </div>
  </section>


<div th:replace="/layout/js :: #js"></div>

  <script>
      $(function () {
          $('#S_addTime_LTOE').datepicker({
              autoclose: true
          });
          $('#S_addTime_GTOE').datepicker({
              autoclose: true
          });
      })
      var $table = $('#table');
      $(function() {
          $(document).on('focus', 'input[type="text"]', function() {
              $(this).parent().find('label').addClass('active');
          }).on('blur', 'input[type="text"]', function() {
              if ($(this).val() == '') {
                  $(this).parent().find('label').removeClass('active');
              }
          });
          // bootstrap table初始化
          // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
          $table.bootstrapTable({
              url: '/operation/list',
              height: getHeight(),
              striped: true,
              search: false,
              searchOnEnterKey: true,
              showRefresh: true,
              showToggle: true,
              showColumns: true,
              minimumCountColumns: 2,
              showPaginationSwitch: true,
              clickToSelect: true,
              detailView: true,
              detailFormatter: 'detailFormatter',
              pagination: true,
              paginationLoop: false,
              classes: 'table table-hover table-no-bordered',
              sidePagination: 'server',
              //silentSort: false,
              smartDisplay: false,
              idField: 'id',
              sortName: 'id',
              sortOrder: 'desc',
              escape: true,
              searchOnEnterKey: true,
              idField: 'id',
              maintainSelected: true,
              toolbar: '#toolbar',
              queryParamsType : "undefined",
              queryParams: function queryParams(params) {   //设置查询参数
                  debugger;
                  var param = {
                      pageNumber: params.pageNumber,
                      pageSize: params.pageSize,
                      condition: $('#searchCondition').serializeObject(),
                      sortName : params.sortName,
                      sortOrder:params.sortOrder
                  };
                  return param;
              },

              columns: [
                  {field: 'state', checkbox: true},
                  {field: 'id', title: 'ID', sortable: true, halign: 'center',align:'center'},
                  {field: 'type', title: '类型', sortable: true, halign: 'center',align:'center',formatter:'typeFormatter'},
                  {field: 'title', title: '标题', sortable: true, halign: 'center',align:'center'},
                  {field: 'operator', title: '操作人', sortable: true, halign: 'center',align:'center'},
                  {field: 'status', title: '当前状态', sortable: true, halign: 'center',align:'center',formatter:'statusFormatter'},
                  {field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
              ]
          }).on('all.bs.table', function (e, name, args) {
              $('[data-toggle="tooltip"]').tooltip();
              $('[data-toggle="popover"]').popover();
          });
      });



      function doSearch(){
          $table.bootstrapTable('refresh');
      }

      function statusFormatter(value, row, index) {
          if (value === 0) {
              return '<span class="label label-default">禁用</span>';
          }else if(value === 1){
              return '<span class="label label-success">正常</span>';
          }
          return '<span class="label label-success">未知</span>';
      }

      function typeFormatter(value, row, index) {
          if (value === 1) {
              return '<span class="label label-default">大运营位</span>';
          }else if(value === 2){
              return '<span class="label label-success">小运营位</span>';
          }
          return '<span class="label label-success">未知</span>';
      }

      function actionFormatter(value, row, index) {
          return [
              '<a class="edit" href="javascript:void(0)" data-toggle="tooltip" title="编辑"><i class="fa fa-pencil-square-o"></i></a>　',
              '<a class="remove" href="javascript:void(0)" data-toggle="tooltip" title="删除"><i class="fa fa-times-circle"></i></a>'
          ].join('');
      }

      window.actionEvents = {
          'click .edit': function (e, value, row, index) {
              openModal('修改系统','/operation/toUpdate/' + row.id);
          },
          'click .remove': function (e, value, row, index) {
              commonDelete('/operation/delete/',row.id);
          }
      };

      function toUpdate(){
          var row = chooseOne();
          if(row){
              openModal('修改运营位','/operation/toUpdate/' + row.id);
          }
      }

      function madalCallback(){
          $table.bootstrapTable('refresh');
      }

  </script>
  </body>
  </html>